import React, { Fragment } from 'react'
import './index.less'
import http from 'libs/http'
import { Pagination, Select } from 'antd'
import { MediaPlayer } from 'components'
import unlockImage from 'images/student/unlock_cover.png';
import lockImage from 'images/student/lock_cover.jpg';
const { Option } = Select;
export default class Classification extends React.Component {
  state = {
    soundList: [],
    queryData: {
      pageIndex: 1,
      pageSize: 6,
      type: 1,
      level: ''
    },
    allCount: 0,
    readCount: 0,
    lockStatus: 0, // 1-已经解锁，0-未解锁
    total: 0,
    videoTitle: '',
    videoUrl: '',
    showModal: false,
  }
  handleChange = (level) => {
    this.setState(state => ({
      queryData: {...state.queryData, level}
    }), this.getSoundList)
  }
  
  // onBlur() {
  //   console.log('blur');
  // }
  
  // onFocus() {
  //   console.log('focus');
  // }
  
  // onSearch(val) {
  //   console.log('search:', val);
  // }
  componentDidMount() {
    this.uploadType(this.props)
  }

  componentWillReceiveProps(nextProps) {
    this.uploadType(nextProps)
  }

  uploadType = (props) => {
    const { type } = props.match.params
    this.setState(state => ({
      queryData: {...state.queryData, type}
    }), this.getSoundList)
  }

  getSoundList = () => {
    const { queryData } = this.state
    http.get('/student/special-materials/listByPage', queryData).then(res => {
      const { allCount, readCount, status: lockStatus, pageInfo } = res.data
      const { list:soundList, total } = pageInfo
      const len = soundList.length
      if(len < 6) {
        soundList.length = 6
        soundList.fill({}, len, 6)
      }
      this.setState({
        allCount, readCount, lockStatus, soundList, total,
      })
    })
  }

  // 切换页码
  changePage = (page) => {
    this.setState(state => ({
      queryData: { ...state.queryData, pageIndex: page }
    }), this.getSoundList)
  }

  // 播放
  handlePlay = (lockStatus, type, fileName, id) => () => {
    // lockStatus 1-已解锁，0-未解锁
    // type 1-原声绘本，2-每日口语
    // fileName 视频地址
    if(lockStatus === 1) {
      http.get('/student/special-materials/getUrl', { id }).then(res => {
        this.setState({
          showModal: true,
          videoTitle: type===1 ? '原声绘本' : '每日口语',
          videoUrl: res.data
        })
      })
    }
  }

  // 关闭播放器
  handleClose = () => {
    this.setState({ 
      showModal: false, videoUrl: '', videoTitle: '' 
    })
  }

  // 立即解锁
  createOrder = () => {
    const { type } = this.state.queryData
    http.post('/student/special-materials/createOrder').then(res => {
      const { orderId, amt: orderPrice } = res.data
      const courseName = '原声绘本' //type === 1 ? '原声绘本' : '每日口语'
      this.props.history.push(`/student_center/my_order/layout/pay/${orderId}/${courseName}/${orderPrice}?redirect=/student_center/original_sound/layout/${type}`)
    })
  }

  render() {
    const { allCount, readCount, lockStatus, soundList, total,
      showModal, videoTitle, videoUrl, 
    } = this.state
    return (
      <Fragment>
        {/* <ul className="original-header">
          <li><b>原声绘本</b><span>{allCount}</span>本</li>
          <li><b>已阅读</b><span>{readCount}</span>本</li>
          {
            lockStatus === 1 ? (
              <li><b>等待打开</b><span>{allCount-readCount}</span>本</li>
            ) : (
              <li><span onClick={this.createOrder} className="unlock"></span></li>
            )
          }
        </ul> */}
        {
          lockStatus === 0 ? <ul className="original-header">
          <li><b>原声绘本</b><span>{allCount}</span>本</li>
          <li><b>已打开</b><span>{readCount}</span>本</li>
          <li><span onClick={this.createOrder} className="unlock"></span></li>
        </ul> : <ul className="original-header">
          <li><b>已打开</b><span>{readCount}</span>本</li>
          <li><b>等待打开</b><span>{allCount - readCount}</span>本</li>
          <li><Select 
                defaultValue="级别筛选" 
                style={{ width: 150 }} 
                onChange={this.handleChange}
                >
                <Option value="1">Level1</Option>
                <Option value="2">Level2</Option>
                <Option value="3">Level3</Option>
                <Option value="4">Level4</Option>
                <Option value="5">Level5</Option>
                <Option value="6">Level6</Option>
                <Option value="7">Level7</Option>
                <Option value="8">Level8</Option>
                <Option value="9">Level9</Option>
                <Option value="10">Level10</Option>
                <Option value="11">Level11</Option>
                <Option value="12">Level12</Option>
                <Option value="13">Level13</Option>
                <Option value="14">Level14</Option>
                <Option value="15">Level15</Option>
              </Select></li>
        </ul>
        }
        
        <div className="original-list">
          {
            soundList.map((item, index) => {
              const {
                fileName, //视频连接
                level, //级别
                name, //名称
                pcImage, //
                // unablePcImage, // 不用了
                status, //是否已读1是0否
                type, //1-原声绘本，2-每日口语
                id,
              } = item
              if(item.id) {
                return (
                  <div key={item.id} className="original-item">
                    <div className="img-wrap">
                      <img src={lockStatus === 1 ? lockImage : unlockImage} />
                      <i className={lockStatus === 1 ? (status === 1 ? 'read-icon' : 'unread-icon') : 'to-unlock-icon'}></i>
                      <span className={lockStatus === 1 ? 'play' : 'unplay'} onClick={this.handlePlay(lockStatus, type, fileName, id)}></span>
                    </div>
                    <p>
                      <span>{name}</span>
                      <span>适用等级：{level}</span>
                    </p>  
                  </div>
                )
              }else {
                return <div key={index}></div>
              }
            })
          }
        </div>
        <MediaPlayer
          src={videoUrl}
          title={videoTitle}
          show={showModal}
          onCancel={this.handleClose}
        />
        <div className="pagination-container">
          <Pagination
            size="small"
            pageSize={6}
            total={total}
            showQuickJumper
            hideOnSinglePage={true}
            onChange={this.changePage}
          />
        </div>
      </Fragment>
    )
  }
}